<template>
    <div>
      <div v-for="(item, index) in arr" :key="index">
        <!-- v-model 绑定 复选框  多选框的value 等于 v-for 里的item当前这一项的值 所以要等于 -->
        <input type="checkbox" v-model="isall" :value="item" />
        <span>{{ item }}</span>
      </div>
      <p>你选中的元素, 累加的值和为:{{ theSum }}</p>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        arr: [9, 15, 19, 25, 29, 31, 48, 57, 62, 79, 87],
        isall: [],
      };
    },
    // 用一个计算属性 掉用点击的 新数组 累加求和 
    computed: {
      theSum() {
        return this.isall.reduce((sum, val) => {
          return (sum += val);
        }, 0);
      },
    },
  };
  </script>
  
  <style>
  </style>